<template>
<div class="components-page">
  <div class="title-bg">次废品统计图</div>
  <div class="mid-desc">
    <div class="show-text" style="color:#17EDCE">
      <span>本月</span>
      <span>22件</span>
    </div>
    <div class="show-text" style="color:#17EDCE">
      <span>此费率</span>
      <span>12.16%</span>
    </div>
  </div>
  <div class="barChart" ref="barChart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      myBarChart: null,
      barChartOptions: {
        color: ["#17EDCE", "#3285ED"],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //图例
        legend: {
          data: ['测试1', '测试2'],
          right: '0',
           textStyle: {
            color: '#ffffff'          // 图例文字颜色
        },
        },
        grid: {
          left: '3%',
          right: '5%',
          top:'30%',
          bottom: '0%',
          containLabel: true
        },
        calculable: true,
        xAxis: [{
          type: 'category',
      
             axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#ffffff",
            fontSize: "12",
          },
          data: []
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            color: "#ffffff",
            fontSize: "12",
          },
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        }, ],
        series: [{
            name: '测试1',
            type: 'bar',
            stack: '广告',
            barWidth: '60%',
            data: []
          },
          {
            name: '测试2',
            type: 'bar',
            stack: '广告',
            barGap: '-75%',
            barWidth: '30%',
            data: []
          }
        ],
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.barChartOptions.series[0].data = [10, 52, 200, 334, 390, 330, 220]
      this.barChartOptions.series[1].data = [17, 59, 190, 870, 760, 430, 650]
      this.barChartOptions.xAxis[0].data = [
        "动作片",
        "动画片",
        "电视剧",
        "纪录片",
        "综艺片",
        "伦理片",
        "恐怖片",
      ]
      this.createBarEchart()
    },
    createBarEchart() {
      this.myBarChart = this.$echarts
        .init(this.$refs.barChart)
        .setOption(this.barChartOptions);
      // window.addEventListener("resize", () => {
      //   this.myBarChart.resize();
      // });
    },
  }
}
</script>

<style lang="less" scoped>
.components-page {
  .title-bg {
    background: url("../../../assets/images/title-bg.png") no-repeat top center;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 4px 10px;
    text-align: left;
    width: 160px;
    margin: 10px;
    color: #ffffff;
  }
  .mid-desc {
    font-size: 12px;
    display: flex;
    width: 50%;
        justify-content: space-evenly;
        .show-text {
          font-weight: 500;
        }

  }

  .barChart {
    width: 100%;
    position: relative;
    top: -20px;
    height: 2.841667rem;
  }
}
</style>
